<script setup>
	import { ref } from "vue"
	import { inProgressStore } from "@/stores/inProgress.js"
	import { chatCreateImagesStore } from "@/stores/chatCreateImages.js"
	const inProgress = inProgressStore()
	const chatCreateImages = chatCreateImagesStore()

	// 风格列表
	const styleList = [{
			icon: '/static/images/style/001.png',
			style: '无风格',
			color: '#1F9BE5'
		},
		{
			icon: '/static/images/style/002.png',
			style: '动漫风格',
			color: '#4F965E'
		},
		{
			icon: '/static/images/style/003.png',
			style: '写实',
			color: '#93726F'
		},
		{
			icon: '/static/images/style/004.jpg',
			style: 'Q版简绘',
			color: '#204251'
		},
		{
			icon: '/static/images/style/005.png',
			style: '治愈男生',
			color: '#656565'
		},
		{
			icon: '/static/images/style/006.png',
			style: '治愈女生',
			color: '#D49D7D'
		},
		{
			icon: '/static/images/style/007.png',
			style: '卡通手绘',
			color: '#ff9999'
		},
		{
			icon: '/static/images/style/008.png',
			style: '复古动漫',
			color: '#ffcc66'
		},
		{
			icon: '/static/images/style/009.png',
			style: '港风胶片',
			color: '#cc3300'
		}
	]
	// 选中的风格
	const selectIndex = ref(0)
	// 画面关键词
	const content = ref('')

	// 开始生成图片
	const submitCreation = () => {
		if (inProgress.queryStatus()) return
		if (content.value.trim() === '') return
		chatCreateImages.seartSending(`${content.value},风格：${styleList[selectIndex.value].style}`)
	}
	// 预览保存图片
	const previewImg = (url) => {
		uni.previewMedia({ sources: [{ url }] })
	}
</script>

<template>
	<!-- 生成风格 -->
	<view class="style-title">生成风格</view>
	<scroll-view scroll-x>
		<view class="style-container">
			<view class="style-content" :class="{'active':selectIndex===index}" v-for="(item,index) in styleList"
				:key="item.style">
				<view class="style-item" @click="selectIndex=index">
					<image :src="item.icon" mode="aspectFill"></image>
					<text :style="{'backgroundColor':item.color}">{{item.style}}</text>
				</view>
			</view>
		</view>
	</scroll-view>
	<!-- 关键词 -->
	<view class="keyword-title">画面关键词</view>
	<view class="textarea-view">
		<textarea class="textarea-style" placeholder="请输入中文描述,比如画一位女子,身穿汉服,手拿佩剑,眼神凌厉" :show-confirm-bar="false"
			v-model="content"></textarea>
	</view>
	<!-- 生成效果 -->
	<template v-for="(item,index) in chatCreateImages.messages" :key="index">
		<view class="creative-tips">{{item.prompt}}</view>
		<view class="creative-image" v-if="item.url != ''">
			<image :src="item.url" mode="widthFix" @click="previewImg(item.url)"></image>
		</view>
	</template>
	<!-- 提交生成 -->
	<button class="submit-creation" @click="submitCreation">生成图片</button>
</template>

<style lang="scss" scoped>
	.style-title {
		padding: 20rpx;
	}

	.style-container {
		height: 130rpx;
		display: flex;

		.style-content {
			width: 130rpx;
			height: 130rpx;
			margin-left: 20rpx;
			flex-shrink: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			&:last-child {
				margin-right: 20rpx;
			}

			&.active {
				border: 4rpx solid #E23256;
				border-radius: 15rpx;
			}

			.style-item {
				position: relative;
				width: 110rpx;
				height: 110rpx;

				image {
					position: absolute;
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}

				text {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					font-size: 22rpx;
					border-bottom-left-radius: 15rpx;
					border-bottom-right-radius: 15rpx;
					padding: 5px 0;
					color: #fff;
					text-align: center;
				}
			}
		}
	}

	.keyword-title {
		padding: 50rpx 20rpx 20rpx 20rpx;
	}

	.textarea-view {
		background-color: #fff;
		margin: 0 20rpx;
		border-radius: 15rpx;
		padding: 10rpx;

		.textarea-style {
			width: 100%;
			line-height: 1.4;
		}
	}

	// ai绘图生成效果
	.creative-tips {
		text-align: center;
		padding: 30rpx 20rpx;
		color: darkorange;
		font-weight: bold;
		line-height: 1.5;
	}

	.creative-image {
		margin: 0 20rpx;

		image {
			width: 100%;
			border-radius: 5rpx;
		}
	}

	.submit-creation {
		position: fixed;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		left: 20rpx;
		right: 20rpx;
		// padding: 10rpx 0;
		border-radius: 40rpx;
		background: linear-gradient(to right, #A2C5FE, #C0E7FD);
	}
</style>